<!--
 *                        .::::.
 *                      .::::::::.
 *                     :::::::::::
 *                  ..:::::::::::'
 *               '::::::::::::'
 *                 .::::::::::
 *            '::::::::::::::..
 *                 ..::::::::::::.
 *               ``::::::::::::::::
 *                ::::``:::::::::'        .:::.
 *               ::::'   ':::::'       .::::::::.
 *             .::::'      ::::     .:::::::'::::.
 *            .:::'       :::::  .:::::::::' ':::::.
 *           .::'        :::::.:::::::::'      ':::::.
 *          .::'         ::::::::::::::'         ``::::.
 *      ...:::           ::::::::::::'              ``::.
 *     ````':.          ':::::::::'                  ::::..
 *                        '.:::::'                    ':'````..
 *
 * @Author: byx
 * @Date: 2022-08-05 21:33:24
 * @LastEditors: byx
 * @LastEditTime: 2022-08-29 20:22:57
 * @version: 1.0
 * @Descripttion: wwww.byx1024.top
 -->

<template>
  <!-- 顶部通栏 -->
  <AppTopnav />
  <!-- 头部组件 -->
  <AppHeader />
  <!-- 吸顶头部组件（注意顺序） -->
  <AppHeaderSticky />
  <!-- 内容容器 -->
  <main class="app-body">
    <!-- 二级路由 -->
    <RouterView />
  </main>
  <!-- 底部组件 -->
  <AppFooter />

  <!-- 测试用户代码 -->
  <!-- <button @click="$store.commit('user/setUser', {})">logout</button>
  <button @click="$store.commit('user/setUser', { token: 123, account: 'byx1024' })">login</button> -->
</template>

<script>
import AppTopnav from '@/components/app-topnav'
import AppHeader from '@/components/app-header'
import AppFooter from '@/components/app-footer'
import AppHeaderSticky from '@/components/app-header-sticky'
import { useStore } from 'vuex'

export default {
  name: 'XtxLayout',
  components: {
    AppTopnav,
    AppHeader,
    AppFooter,
    AppHeaderSticky
  },
  // 获取下分类数据
  setup() {
    const store = useStore()
    // 含有异步操作，数据提交至 actions ，可用于向后台提交数据
    store.dispatch('category/getCategoryList')
  }
}
</script>

<style lang="less" scoped>
.app-body {
  min-height: 600px;
}
</style>
